<template>
  <div>
    <button class="btn" @click="add">添加管理员+</button>
    <el-drawer v-model="drawer" :with-header="false">
      <el-form ref="form" :model="form">
        <el-form-item label="账号">
          <el-input v-model="form.adminname"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.role" placeholder="请选择角色">
            <el-option :value="1" label="管理员"></el-option>
            <el-option :value="2" label="普通用户"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span>权限</span>
      <el-tree
        :props="props"
        :data="dataTree"
        show-checkbox
        default-expand-all
        node-key="label"
        :default-checked-keys="defaultCheckedKeys"
        ref="mytree"
      />
      <template #footer>
        <div style="flex: auto">
          <el-button @click="reset">取消</el-button>
          <el-button v-if="flag==1" type="primary" @click="addOk">确定</el-button>
          <el-button v-else type="primary" @click="changeEdit">确定编辑</el-button>
        </div>
      </template>
    </el-drawer>

    <el-table :data="pageList" style="width: 100%;display: flex;">
      <el-table-column type="index" label="序号" width="310"></el-table-column>
      <el-table-column prop="adminname" label="姓名" width="310"></el-table-column>
      <el-table-column label="权限" width="310"></el-table-column>
      <el-table-column label="操作" width="310">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="list.length" v-model:current-page="page" />
  </div>
</template>

<script>
import { routes } from '../../router/index';
import { ElMessage } from 'element-plus';
import { getAdminList, addAdmin, deleteAdmin, changeAdmin } from '../../service/admin.js';
export default {
  data() {
    return {
      list: [],
      props: {
        label: 'label',
        children: 'children'
      },
      defaultCheckedKeys: [],
      page: 1,
      drawer: false,
      flag: 1,
      form: {
        adminid: -1,
        adminname: '',
        password: '',
        role: 1,
        checkedKeys: []
      }
    };
  },
  computed: {
    pageList() {
      return this.list.slice((this.page - 1) * 10, this.page * 10);
    },
    dataTree() {
      return JSON.parse(JSON.stringify(routes[2].children));
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getSelectedNodes() {
      let list = this.$refs.mytree.getCheckedNodes(true);
      // console.log(list);
      let temp = [];
      let result = [];
      list.forEach(item => {
        let parentNode = this.dataTree.find(item1 => {
          return item1.children.some(item2 => item2.label === item.label);
        });
        // console.log(parentNode);
        if (!temp.includes(parentNode.label)) {
          temp.push(parentNode.label);
          result.push({
            path: parentNode.path,
            label: parentNode.label,
            children: [item]
          });
        } else {
          result.find(ritem => ritem.label === parentNode.label).children.push(item);
        }
      });
      // console.log(temp);
      // console.log(result);
      this.form.checkedKeys = result;
      // console.log(this.form.checkedKeys);
    },
    add() {
      this.reset();
      if (this.$refs.mytree) {
        this.$refs.mytree.setCheckedKeys([]);
      }
      this.drawer = true;
    },
    addOk() {
      this.getSelectedNodes();
      if (this.form.adminname === '' || !this.form.password === '' || !this.form.role === '') {
        ElMessage({
          message: '相关信息不能为空',
          type: 'warning'
        });
        return;
      }
      // console.log(this.$refs.mytree.getCheckedNodes(true));
      this.$refs.mytree.setCheckedKeys([]);
      // console.log(this.form);
      addAdmin(this.form).then(res => {
        if (res.code === '200') {
          this.getList();
          this.reset();
        }
      });
    },
    changeEdit() {
      this.getSelectedNodes();
      if (this.form.adminname === '' || !this.form.password === '' || !this.form.role === '') {
        ElMessage({
          message: '相关信息不能为空',
          type: 'warning'
        });
        return;
      }
      // console.log(this.form);
      changeAdmin(this.form).then(res => {
        console.log(res);
        if (res.code === '200') {
          this.getList();
        }
        this.reset();
      });
    },
    reset() {
      this.drawer = false;
      this.form.adminname = '';
      this.form.password = '';
      this.form.role = '';
      this.form.checkedKeys = '';
    },
    handleEdit(index, row) {
      // console.log(index, row);
      this.drawer = true;
      this.form.adminname = row.adminname;
      this.form.password = row.password;
      this.form.adminid = row.adminid;
      this.form.role = row.role;
      this.form.checkedKeys = row.checkedKeys;
      this.flag = 2;
      if (this.$refs.mytree) {
        this.$refs.mytree.setCheckedKeys([]);
      }
      let arr = [];
      row.checkedKeys.forEach(item => {
        if (item.children) {
          item.children.forEach(item1 => {
            arr.push(item1.label);
          });
        }
      });
      this.defaultCheckedKeys = arr;
    },
    handleDelete(index, row) {
      console.log(index, row);
      deleteAdmin({ adminid: row.adminid }).then(res => {
        // console.log(res);
        if (res.code === '200') {
          this.getList();
        }
      });
    },
    getList() {
      getAdminList().then(res => {
        this.list = res.data;
      });
    }
  }
};
</script>
<style scoped>
.btn {
  background-color: #409eff;
  height: 34px;
  color: white;
  border: 0;
  border-radius: 5px;
  width: 120px;
  margin: 0px 0 20px;
  font-size: 14px;
  line-height: 34px;
}
.th {
  display: flex;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ccc;
}
.th span {
  width: 25%;
  text-align: center;
}
.list {
  width: 100%;
  background-color: #ffffff;
}
</style>